<template>
  <div>
    <div class="sou">
      <van-search
        style="width: 100%"
        v-model="value"
        shape="round"
        background="white"
        placeholder="搜职业/行业/词典"
      />
      <span @click="fun()">搜索</span>
      <span @click="fan()">取消</span>
    </div>
    <div class="lishi">历史记录</div>

    <ul>
      <li
        style="margin-top: 20px; padding: 10px"
        v-for="(v, i) in newsou"
        :key="i"
      >
        {{ v.text }}
      </li>
    </ul>
    <div class="faxian">
      <p>发现更多</p>
      <b>前端</b>
      <b>vue</b>
      <b>JavaScript</b>
      <b>华为</b><br />
      <b>外包</b>
      <b>阿里</b>
      <b>外包</b>
      <b>阿里</b>
      <b>腾讯</b><br />
      <b>大厂</b>
      <b>router</b>
      <b>后端</b>
      <b>html</b>
    </div>
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <h1>以下为组件演示页面</h1>
    <div>
      <button @click="add('DonTaiOne')">one</button>
      <button @click="add('DonTaiThree')">three</button>
      <button @click="add('DonTaiTwo')">two</button>
      <keep-alive>
        <component :is="Com"></component>
      </keep-alive>
    </div>
  </div>
</template>

<script>
import DonTaiOne from "@/components/dongtai/DonTaiOne.vue";
import DonTaiThree from "@/components/dongtai/DonTaiThree.vue";
import DonTaiTwo from "@/components/dongtai/DonTaiTwo.vue";
export default {
  components: {
    DonTaiOne,
    DonTaiThree,
    DonTaiTwo,
  },
  data() {
    return {
      value: "",
      Com: "DonTaiOne",
    };
  },
  computed: {
    newsou() {
      return this.$store.state.qiqi.arr4;
    },
  },
  methods: {
    fun() {
      this.$store.dispatch("SOU_ADD", { textlist: this.value });
      console.log(this.$store.state.qiqi.arr4);
    },

    fan() {
      this.$router.push("/baike");
    },
    add(val) {
      this.Com = val;
    },
  },
};
</script>

<style lang="scss" scoped>
* {
  font-size: 0.16rem;
}
.sou {
  width: 3.67rem;
  display: flex;
  justify-content: space-between;
  span {
    width: 0.49rem;
    font-size: 0.12rem;
    align-self: center;
  }
}
.faxian {
  b {
    display: inline-block;
    font-size: 0.14rem;
    width: 0.71rem;
    height: 0.22rem;
    text-align: center;
    line-height: 0.22rem;
    background-color: #ececec;
    margin-right: 0.2rem;
    margin-top: 0.2rem;
  }
}
.lishi,
.faxian {
  font-weight: 700;
}
</style>